<template>
	<view class="container">
		<view class="balance-card">
			<view class="title">账户余额</view>
			<view class="amount">￥{{balance}}</view>
			<view class="actions">
				<button class="action-btn" @tap="recharge">充值</button>
				<button class="action-btn" @tap="withdraw">提现</button>
			</view>
		</view>
		
		<view class="transaction-list">
			<view class="list-header">
				<text>交易记录</text>
			</view>
			<view class="list-content">
				<view class="transaction-item" v-for="(item, index) in transactions" :key="index">
					<view class="info">
						<text class="type">{{item.type}}</text>
						<text class="time">{{item.time}}</text>
					</view>
					<text class="amount" :class="{ income: item.amount > 0 }">{{item.amount > 0 ? '+' : ''}}{{item.amount}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			balance: 0.00,
			transactions: [
				{
					type: '接单收入',
					time: '2024-03-20 10:30',
					amount: 5.00
				},
				{
					type: '提现',
					time: '2024-03-19 15:20',
					amount: -10.00
				},
				{
					type: '充值',
					time: '2024-03-19 14:30',
					amount: 20.00
				}
			]
		}
	},
	methods: {
		recharge() {
			uni.showModal({
				title: '充值金额',
				editable: true,
				placeholderText: '请输入充值金额',
				success: (res) => {
					if (res.confirm) {
						const amount = parseFloat(res.content)
						if (isNaN(amount) || amount <= 0) {
							uni.showToast({
								title: '请输入有效金额',
								icon: 'none'
							})
							return
						}
						
						// TODO: 调用支付接口
						uni.showLoading({
							title: '充值中...'
						})
						
						setTimeout(() => {
							uni.hideLoading()
							this.balance += amount
							this.transactions.unshift({
								type: '充值',
								time: new Date().toLocaleString(),
								amount: amount
							})
							uni.showToast({
								title: '充值成功',
								icon: 'success'
							})
						}, 1500)
					}
				}
			})
		},
		withdraw() {
			if (this.balance <= 0) {
				uni.showToast({
					title: '余额不足',
					icon: 'none'
				})
				return
			}
			
			uni.showModal({
				title: '提现金额',
				editable: true,
				placeholderText: '请输入提现金额',
				success: (res) => {
					if (res.confirm) {
						const amount = parseFloat(res.content)
						if (isNaN(amount) || amount <= 0 || amount > this.balance) {
							uni.showToast({
								title: '请输入有效金额',
								icon: 'none'
							})
							return
						}
						
						// TODO: 调用提现接口
						uni.showLoading({
							title: '提现中...'
						})
						
						setTimeout(() => {
							uni.hideLoading()
							this.balance -= amount
							this.transactions.unshift({
								type: '提现',
								time: new Date().toLocaleString(),
								amount: -amount
							})
							uni.showToast({
								title: '提现成功',
								icon: 'success'
							})
						}, 1500)
					}
				}
			})
		}
	}
}
</script>

<style lang="scss">
.container {
	min-height: 100vh;
	background-color: $background-color;
}

.balance-card {
	background-color: $theme-color;
	padding: 40rpx;
	color: #fff;
	
	.title {
		font-size: 28rpx;
		opacity: 0.9;
		margin-bottom: 20rpx;
	}
	
	.amount {
		font-size: 60rpx;
		font-weight: bold;
		margin-bottom: 40rpx;
	}
	
	.actions {
		display: flex;
		
		.action-btn {
			flex: 1;
			height: 80rpx;
			border: 2rpx solid #fff;
			border-radius: 40rpx;
			color: #fff;
			font-size: 28rpx;
			margin: 0 20rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			background-color: transparent;
			
			&:first-child {
				margin-left: 0;
			}
			
			&:last-child {
				margin-right: 0;
			}
		}
	}
}

.transaction-list {
	background-color: #fff;
	margin-top: 20rpx;
	
	.list-header {
		padding: 20rpx;
		border-bottom: 1rpx solid $border-color;
		
		text {
			font-size: 28rpx;
			color: $text-color;
			font-weight: bold;
		}
	}
	
	.list-content {
		.transaction-item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 20rpx;
			border-bottom: 1rpx solid $border-color;
			
			.info {
				.type {
					font-size: 28rpx;
					color: $text-color;
					margin-bottom: 6rpx;
					display: block;
				}
				
				.time {
					font-size: 24rpx;
					color: $text-color-grey;
				}
			}
			
			.amount {
				font-size: 32rpx;
				color: #ff5500;
				
				&.income {
					color: #07c160;
				}
			}
		}
	}
}
</style> 